<template>
  <view>
    <view class="modal-mask" @click.prevent="hideModal" v-if="showModal"></view>
    <view class="modal-dialog" v-if="showModal">
      <view class="modal-title">提示</view>
      <view class="modal-content">
        <view class="modal-input">
          <button class="modal-button" open-type="getUserInfo" @click="hideModal" lang="zh_CN">获取用户信息</button>
        </view>
      </view>
      <!--<view class="modal-footer">-->
      <!--<view class="btn-cancel" @click="onCancel" data-status="cancel">取消</view>-->
      <!--<view class="btn-confirm" @click="onConfirm" data-status="confirm">确定</view>-->
      <!--</view>-->
    </view>
  </view>
</template>

<script>
  export default {
    data: function() {
      return {
        showModal: true
      };
    },
    methods: {
      showDialogBtn: function() {
        this.showModal = true;
      },
      /**
       * 弹出框蒙层截断touchmove事件
       */
      preventTouchMove: function() {
      },
      /**
       * 隐藏模态对话框
       */
      hideModal: function() {
        this.showModal = false;
        wx.navigateBack();
      },
      /**
       * 对话框取消按钮点击事件
       */
      onCancel: function() {
        this.hideModal();
      },
      /**
       * 对话框确认按钮点击事件
       */
      onConfirm: function() {
        this.hideModal();
      }
    }
  };
</script>

<style scoped>

  .show-btn {
    margin-top: 100rpx;
    color: #22cc22;
  }

  .modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    color: #fff;
  }

  .modal-dialog {
    width: 540rpx;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    background: #f9f9f9;
    margin: -180rpx 105rpx;
    border-radius: 36rpx;
  }

  .modal-button {
    background-color: #00000000;
    border: 0px;
    display: inline;
    box-sizing: unset;
    position: unset;
  }

  .modal-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    color: #030303;
    text-align: center;
  }

  .modal-content {
    padding: 150rpx 30rpx;
  }

  .modal-input {
    display: flex;
    background: #fff;
    border: 2rpx solid #ddd;
    border-radius: 4rpx;
    font-size: 28rpx;
  }

  input-holder {
    color: #666;
    font-size: 28rpx;
  }

  .modal-footer {
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 1px solid #dedede;
    font-size: 34rpx;
    line-height: 86rpx;
  }

  .btn-cancel {
    width: 50%;
    color: #666;
    text-align: center;
    border-right: 1px solid #dedede;
  }

  .btn-confirm {
    width: 50%;
    color: #ec5300;
    text-align: center;
  }
</style>
